<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table id="table" border="1" cellpadding="10" cellspacing="0" align="center">
			
		</table>
		<h2>
			
		</h2>
		<script type="text/javascript">
			let books = [];
			books.push({id:1, date:'2010-10', price:60, num:1, name:'《java从入门到放弃》'});
			books[1]={id:2, date:'2012-10', price:90, num:1, name:'《PHP从入门到放弃》'};
			books.push({id:3, date:'2013-10', price:80.01, num:1, name:'《Python从入门到放弃》'});
			books.push({id:4, date:'2011-10', price:100.02, num:1, name:'《什么都是从入门到放弃》'});
			let table = document.getElementById("table");
				let thead = document.createElement("thead");
				table.appendChild(thead);
					let tr = document.createElement("tr");
					thead.appendChild(tr);
						let th = document.createElement("th");
						th.innerText="ID";
						tr.appendChild(th);
						th = document.createElement("th");
						th.innerText="书籍名称";
						tr.appendChild(th);
						th = document.createElement("th");
						th.innerText="出版日期";
						tr.appendChild(th);
						th = document.createElement("th");
						th.innerText="价格";
						tr.appendChild(th);
						th = document.createElement("th");
						th.innerText="购买数量";
						tr.appendChild(th);
						th = document.createElement("th");
						th.innerText="操作";
						tr.appendChild(th);
			
			let tbody = document.createElement("tbody");
			table.appendChild(tbody);
					for(let item of books){
						tr = document.createElement("tr");
						tbody.appendChild(tr);
						
						td = document.createElement("td");
						td.innerText=item.id;
						
						tr.appendChild(td);
						td = document.createElement("td");
						td.innerText=item.name;
						
						tr.appendChild(td);
						td = document.createElement("td");
						td.innerText=item.date;
						
						tr.appendChild(td);
						td = document.createElement("td");
						td.innerText=item.price;
						
						tr.appendChild(td);
						td = document.createElement("td");
						td.innerHTML += "<button type='button'>-</button>";
						td.innerHTML += item.num;
						td.innerHTML += "<button type='button'>+</button>";
						
						tr.appendChild(td);
						td = document.createElement("td");
						td.innerHTML = "<button type='button'>移除</button>";
						tr.appendChild(td);
					}
					
					// let result = books.reduce(function(returnVal,nextBook,index,arr){
					// 	console.log(index);
					// 	let sum = 0;
					// 	if(index === 1){
					// 		sum = returnVal.price * returnVal.count + nextBook.price * nextBook.num;
					// 		return sum;
					// 	}
					// 	return returnVal + nextBook.price * nextBook.num;
					// })
					let h2 = document.getElementsByTagName("h2")[0];
					let result = books.reduce((returnVal,nextItem)=>{
						return returnVal + nextItem.price * nextItem.num;
					},0)
					console.log(result);
					h2.innerText = result;
		</script>
	</body>
</html>
